<template>
  <div class="flex justify-between">
    <h1 class="title">
      <span class="content">全部评论</span>
    </h1>
    <div class="f-c-c">
      共
      <em class="title-count">{{ commentCount }}</em>
      条评论
    </div>
  </div>
  <!-- 评论 -->
  <div class="mt-20 flex">
    <div class="mr-16 ml-16">
      <Avatar :size="50" :src="userStore.avatar" />
    </div>
    <div class="f-c-c mr-20 w-600">
      <el-input
        placeholder="你猜我的评论区在等待谁？"
        class="h-50"
        v-model="commentContent"
        @keyup.enter="addComment()"
        maxlength="2048"
      />
    </div>
    <div class="f-c-c">
      <el-button
        type="primary"
        size="large"
        :disabled="commentContent === ''"
        @click="addComment()"
      >
        发布
      </el-button>
    </div>
  </div>
  <!-- 无数据 -->
  <div v-if="commentCount === 0" class="w-100% mt-20">
    <svg-icon
      name="sour_face"
      class="svg"
      width="150px"
      height="150px"
    ></svg-icon>
    <span class="f-c-c mt-5 color-#909399">暂无评论内容，请稍后再试~</span>
  </div>
  <!-- 评论列表 -->
  <div
    v-else
    class="flex mt-20 box pb-20"
    v-for="item in commentList"
    :key="item.commentId"
  >
    <div class="mr-16 ml-16">
      <Avatar :size="50" :src="item.avatar" />
    </div>
    <div>
      <div class="font-500 color-#61666d font-size-16">
        {{ item.username }}
      </div>
      <div class="comment-content">
        {{ item.content }}
      </div>
      <div class="comment-footer">
        <!-- 底部时间 -->
        <div class="footer-date flex-box-gap">{{ item.createTime }}</div>
        <el-divider direction="vertical" />
        <div
          class="replay-title flex-box-gap"
          @click="openReply(item.commentId, item.userId, item.username)"
        >
          回复
        </div>
        <el-divider direction="vertical" />
      </div>
      <div
        class="flex mt-20"
        v-for="children in item.children"
        :key="children.commentId"
      >
        <div class="mr-16 ml-16">
          <Avatar :size="40" :src="children.avatar" />
        </div>
        <div>
          <div class="font-500 color-#61666d font-size-16">
            {{ children.username }}
          </div>
          <div class="comment-content">{{ children.content }}</div>
          <div class="comment-footer">
            <!-- 底部时间 -->
            <div class="footer-date flex-box-gap">
              {{ children.createTime }}
            </div>
          </div>
        </div>
      </div>
      <!-- 回复 -->
      <div
        class="mt-20 flex"
        v-if="replyBox.replyIsShow && item.commentId === replyBox.commentPid"
      >
        <div class="mr-16 ml-16">
          <Avatar :size="50" :src="userStore.avatar" />
        </div>
        <div class="f-c-c mr-20 w-400">
          <el-input
            :placeholder="`回复 @${replyBox.replyMsg}：`"
            class="h-50 hover"
            v-model="replyBox.replyContent"
            @keyup.enter="replyComment()"
            maxlength="2048"
          />
        </div>
        <div class="f-c-c">
          <el-button
            type="primary"
            size="large"
            @click="replyComment()"
            :disabled="replyBox.replyContent === ''"
          >
            发布
          </el-button>
        </div>
      </div>
    </div>
  </div>
</template>

<script setup lang="ts">
import { reqV2AddComment } from '@/api/comment'
import type { CommentVO } from '@/api/course/type'
import useUserStore from '@/store/modules/user'

defineProps({
  commentList: {
    type: Array<CommentVO>,
    default: [],
  },
  commentCount: {
    type: Number,
    default: 0,
  },
})
const emit = defineEmits(['updateCommentTree'])

let route = useRoute()
let userStore = useUserStore()
let commentContent = ref<string>('')
let replyBox = reactive({
  replyIsShow: false,
  userId: '',
  replyMsg: '',
  replyContent: '',
  commentPid: '',
})

const addComment = async () => {
  if (commentContent.value === '') return
  await reqV2AddComment(
    route.params.courseId as string,
    commentContent.value,
    '',
  )
  //更新评论
  emit('updateCommentTree')
  //清空评论内容
  commentContent.value = ''
  ElMessage.success('操作成功')
}

const openReply = (commentId: string, userId: string, username: string) => {
  if (replyBox.replyIsShow && replyBox.commentPid === commentId) {
    // 再次点击关闭回复框
    replyBox.replyIsShow = false
    replyBox.replyContent = ''
    replyBox.userId = ''
    replyBox.replyMsg = ''
    replyBox.commentPid = ''
    return
  }
  replyBox.replyIsShow = true
  replyBox.userId = userId
  replyBox.replyMsg = username
  replyBox.commentPid = commentId
}

const replyComment = async () => {
  if (replyBox.replyContent === '') return
  await reqV2AddComment(
    route.params.courseId as string,
    replyBox.replyContent,
    replyBox.commentPid,
  )
  //更新评论
  emit('updateCommentTree')
  //清空评论内容
  replyBox.replyContent = ''
  ElMessage.success('操作成功')
}
</script>

<style scoped lang="scss">
/* 评论内容 */
.comment-content {
  font-weight: 400;
  color: #18191c;
  padding-top: 10px;
  line-height: 24px;
}
/* 标题 */
.title {
  margin: 0;
  color: #00061a;
  font-weight: 600;
  font-size: 18px;
  line-height: 24px;
  padding: 24px 0 24px;
  line-height: unset;
  vertical-align: middle;
  .content {
    border-left: 5px solid #333;
    padding-left: 5px;
    line-height: 24px;
  }
}
.box {
  border-bottom: #6f717544 solid 1px;
}
.comment-footer {
  display: flex;
  align-items: center;
  margin-top: 16px;
  .flex-box-gap {
    display: flex;
    gap: 8px;
    align-items: center;
    &:hover {
      background: rgba(0, 0, 0, 0.018);
    }
  }
  .footer-date {
    color: rgba(0, 0, 0, 0.45);
    margin-right: 16px;
  }
  .replay-title {
    color: rgba(0, 0, 0, 0.45);
    cursor: pointer;
    margin: 0 16px;
    display: flex;
    gap: 8px;
    &:hover {
      color: blue;
    }
  }
}
.title-count {
  font-weight: 600;
  color: #14171a;
  font-style: normal;
}
.footer-price-free {
  margin-right: 6px;
  color: red;
}
.footer-price-pay {
  text-decoration: line-through;
  margin-right: 6px;
  color: gray;
}
.title-text {
  color: rgba(0, 0, 0, 0.45);
}
.info-content {
  display: flex;

  .left-content {
    img {
      width: 250px;
    }
  }
  .right-content {
    font-size: 16px;
    font-weight: 400;
    line-height: 150%;
    margin-left: 8px;
    .title {
      margin-bottom: 8px;
      font-weight: 600;
      font-size: 18px;
      line-height: 140%;
    }
  }
}
.item-footer {
  display: flex;
  justify-content: flex-end;
  align-items: center;
  .footer-box {
    cursor: pointer;
    & > div {
      font-size: 16px;
    }
    &:hover .svg,
    &:hover > div {
      color: #1890ff;
    }
  }
}
</style>
